<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="item">
        <div class="search-label">车型编号：</div>
        <el-input
          v-model="params.truckTypeId"
          clearable
          placeholder="请输入车型编号"
          class="search-main"
        />
      </div>
      <div class="item">
        <div class="search-label">车牌号码：</div>
        <el-input
          v-model="params.licensePlate"
          clearable
          placeholder="请输入车牌号码"
          class="search-main"
        />
      </div>
      <div class="item">
        <el-button
          type="warning"
          @click="doSearch"
        >搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <TabChange
      :default-active-index="1"
      :setting-list="[
        {
          value: 0,
          label: '全部',
          num: trueStatus + offStatus
        },
        {
          value: 1,
          label: '可用',
          num: trueStatus
        },
        {
          value: 2,
          label: '停用',
          num: offStatus
        },
      ]"
      @tabChange="tabChange"
    ></TabChange>
    <div class="top">
      <el-button
        type="warning"
        style="margin-left: 45px"
        @click="addCar"
      >新增车辆</el-button>
    </div>
    <div
      class="content"
      style="margin-left: 45px"
    >
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="licensePlate"
          label="车辆号码"
          width="280"
        >
        </el-table-column>
        <el-table-column
          prop="truckTypeName"
          label="车辆类型"
        >
        </el-table-column>
        <el-table-column
          prop="driverNum"
          label="司机数量"
          width="130"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="车辆状态"
          width=""
          :formatter="formatterStatus"
        >
        </el-table-column>
        <el-table-column
          prop="deviceGpsId"
          label="GPS设备ID"
          width=""
        >
        </el-table-column>
        <el-table-column
          prop="allowableLoad"
          label="实载重量(T)"
          width=""
        >
        </el-table-column>
        <el-table-column
          prop="allowableVolume"
          label="实载体积(方)"
          width=""
        >
        </el-table-column>
        <el-table-column
          text-align-center
          label="操作"
          width=""
          align="center"
        >
          <template #default="scope">
            <el-button
              type="text"
              class="edit"
              @click="infoMsg(scope.row.id)"
            >查看详情</el-button>
            <el-button
              v-if="scope.row.status === 1"
              type="text"
              style="color: red"
              @click="offCar(scope.row.id)"
            >停用</el-button>
            <el-button
              v-else
              type="text"
              style="color: skyblue"
            >启用</el-button>
            <el-button
              type="text"
              class="edit"
              @click="editDirver(scope.row.id)"
            >配置司机</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="page-container">
      <el-pagination
        style="text-align: center;"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 添加 & 编辑弹框 -->
    <vehicleAdd
      ref="dialog"
      @getList="getList"
    ></vehicleAdd>
    <!-- 停用弹框 -->
    <el-dialog
      title="确定要停用吗?"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <div
        class="tip"
        style="padding-left: 20px;"
      >
        <div style="margin-bottom: 30px;">车辆停用需满足以下条件:</div>
        <span style="margin-right: 20px;">1. 车辆当前无运输任务</span>
        <span>2. 车辆无关联运输路线</span>
        <div style="padding: 5px; margin-top: 20px; background-color: #fff3ef;">注: 停用后司机将自动解绑</div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="warning"
          @click="offCarStatus"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 配置司机弹窗 -->

    <el-dialog
      title="配置司机"
      :visible.sync="dialogTableVisible2"
      width="700px"
    >
      <div class="info">
        <div class="item">
          <div class="key">车牌号码</div>
          <div class="value">{{ carInfo.licensePlate }}</div>
        </div>
        <div class="item">
          <div class="key">车型</div>
          <div class="value">{{ carInfo.truckTypeName }}</div>
        </div>
        <div class="item">
          <div class="key">车辆状态</div>
          <div class="value">{{ carInfo.status === 0? '停用' : '启用' }}</div>
        </div>
        <div class="item">
          <div class="key">实载重量</div>
          <div class="value">{{ carInfo.allowableLoad }}</div>
        </div>
        <div class="item">
          <div class="key">实载体积</div>
          <div class="value">{{ carInfo.allowableVolume }}</div>
        </div>
      </div>
      <div
        class="dirver"
        style="margin-left: 30px; margin-bottom: 20px"
      >
        <span style="margin-right: 10px">配置司机</span>
        <el-select>
          <el-option></el-option>
        </el-select>
      </div>
      <el-table :data="dirverList">
        <el-table-column
          type="index"
          label="序号"
          width="200"
        ></el-table-column>
        <el-table-column
          property="name"
          label="司机姓名"
          width="300"
        ></el-table-column>
        <el-table-column
          label="操作"
        >
          <el-button type="text">编辑</el-button>
          <el-button
            type="text"
            style="color: red"
          >删除</el-button>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import TabChange from '@/components/TabChange'
import vehicleAdd from './components/vehicle-add.vue'
import { truckList, getTruckListInDriver, getTrueCar, truckStatusNoUse, truckTypeDetail, getDriverListByCar } from '@/api/transit'
export default {
  name: 'Vehicle',
  components: {
    TabChange,
    vehicleAdd
  },
  data() {
    return {
      list: [], // 车辆列表
      params: {
        licensePlate: '', // 车牌号码
        page: 1, // 页码
        pageSize: 10, // 页尺寸
        truckTypeId: null, // 车辆id
        workStatus: null // 车辆状态
      },
      counts: 0, // 总条数
      total: null, // 总页数
      offStatus: 0, // 停用车辆
      trueStatus: 0, // 启用车辆
      dialogVisible1: false, // 停用弹框
      id: null,
      dialogTableVisible2: false, // 配置司机弹框
      dirverList: [], // 司机列表
      carInfo: {}, // 车辆信息
      dirverSelect: [] // 配置司机下拉菜单
    }
  },
  created() {
    this.getList()
    this.getOffCar()
    this.getTrueCar()
  },
  methods: {
    // 获取分页数据
    async getList() {
      const res = await truckList(this.params)
      this.counts = +res.data.counts
      this.total = +res.data.pages
      this.list = res.data.items
    },
    // 车辆状态tab切换
    tabChange(activeIndex) {
      this.status = activeIndex
      this.getList()
    },
    // 分页器切换
    handleCurrentChange(num) {
      this.params.page = num
      this.getList()
    },
    // 处理车辆状态显示
    formatterStatus(row) {
      const MAP = {
        0: '禁用',
        1: '正常'
      }
      return MAP[row.status]
    },
    // 添加车辆
    addCar() {
      this.$refs.dialog.dialogFormVisible = true
    },
    // 获取已停用的车辆
    async getOffCar() {
      const res = await getTruckListInDriver()
      this.offStatus = res.data.length
    },
    // 获取以启用的车辆
    async getTrueCar() {
      const res = await getTrueCar()
      this.trueStatus = res.data.length
    },
    // 搜索
    doSearch() {
      this.params.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.params.licensePlate = ''
      this.params.truckTypeId = null
    },
    // 查看详情
    infoMsg(id) {
      this.$router.push({
        path: '/transit/vehicle-detail',
        query: {
          id
        }
      })
    },
    // 配置司机
    async editDirver(id) {
      const res = await truckTypeDetail(id)
      this.dialogTableVisible2 = true
      this.carInfo = res.data
      await this.getCarDirver(id)
      await this.getDirverList()
    },
    // 停用车辆
    offCar(id) {
      this.dialogVisible1 = true
      this.id = id
    },
    async offCarStatus() {
      await truckStatusNoUse(this.id)
      this.$message.success('停用成功')
      this.dialogVisible1 = false
    },
    // 获取车辆绑定的司机
    async getCarDirver(id) {
      const res = await getDriverListByCar(id)
      this.dirverList = res.data
    },
    // 获取司机下拉菜单
    async getDirverList() {

    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px;
  background-color: #fff;

  .item {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-left: 30px;

    .search-label {
      width: 100px;
    }

    .search-main {
      width: 450px;
      margin-right: 10px;
    }
  }
}

.top {
  padding-left: 14px;
  height: 100px;
  line-height: 100px;
  background-color: #fff;
}

.edit {
  color: #419EFF;
}

.del {
  color: #F56C6C;
}

.el-dialog__wrapper {
  ::v-deep .el-dialog__body {
    padding-left: 0px;
  }
}

.page-container {
  height: 200px;
  padding: 4px 0px;
  text-align: right;
}
.info {
  margin-left: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  .item {
    margin: 10px 0;
    width: 50%;
    display: flex;
    .key {
      margin-right: 20px;
    }
  }
}
</style>
